<template>
  <div :class="{[css.place]: fixed}">
    <div :class="[css.tab, {[css.fixed]: fixed}]">
      <template v-for="tab in list">
        <slot :tab="tab">
          <span :key="tab.value" :class="{[css.active]: tab.value === value}" @click="toggle(tab)">{{tab.name}}</span>
        </slot>
      </template>
    </div>
  </div>
</template>
<script>
export default {
  name: 'r-tab',
  model: {
    prop: 'value',
    event: 'update'
  },
  props: {
    list: {
      type: Array,
      required: true
    },
    fixed: {
      type: Boolean,
      default: false
    },
    value: {
      type: [String, Number]
    }
  },
  methods: {
    toggle ({value}) {
      if (value === this.value) {
        return
      }
      this.$emit('update', value)
    }
  }
}
</script>
<style module="css" lang="scss">
  @import "../styles/index";

  .tab {
    background: white;
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);

    > span {
      position: relative;
      text-align: center;
      flex: 1;
      display: block;
      height: $height-tab;
      line-height: $height-tab;
      font-size: 14px;
      color: #666;
      transition: color 0.3s ease-out;
      word-break: keep-all;

      &::after {
        content: ' ';
        position: absolute;
        line-height: 0;
        bottom: 0;
        left: 0;
        height: 1px;
        width: 100%;
        transform: scaleY(0.5);
        transform-origin: bottom;
        background-color: #e5e5e5;
      }
    }

    .active {
      color: $color-primary;

      &::after {
        background-color: $color-primary;
        height: 3px;
      }
    }
  }

  .fixed {
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 1;
  }

  .fixed,
  .place {
    height: 45px;
  }
</style>
